<template>
  <h1>{{ msg }}</h1>
  <el-divider content-position="left">点击事件+数值同步</el-divider>
  <button @click="count++">count is: {{ count }}</button>
  <el-divider content-position="left">code标签（定义计算机代码文本）</el-divider>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <hr />
  <el-divider content-position="left">点击事件+数值翻倍</el-divider>
  <h1>{{state.count}} * 2 = {{double}}</h1>
  <h2>{{num}}</h2>
  <button @click="add">累加</button>
</template>

<script>
  import {reactive, computed, ref, onMounted} from 'vue'

  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    data() {
      return {
        count: 0
      }
    },
    setup() {
      console.log('111111')
      const { state, double } = useCounter(1, 2)
      const num = ref(2)

      function add() {
        state.count++
        num.value+=10
      }


      onMounted(() => {
        console.log('mouted')
      })

      return {
        add,
        state,
        double,
        num
      }
    }
  }

  function useCounter(count, n) {
    const state = reactive({
      count
    })
    const double = computed(() => state.count * n)
    return {
      state,
      double
    }
  }

</script>
